<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0 ,minimum-scale=1.0 ,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>个人资料</title>
    <link rel="stylesheet" href="../css/reset.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/iconfont.css"/>
    <link rel="stylesheet" href="../css/swiper.css"/>
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script src="../js/swiper.jquery.min.js"></script>
    <style>
        .header .right a{color: #fff;}
        .swiper-slide{width: 100%;height: 200px;background-size: contain;background-position: center;background-repeat: no-repeat;}
        .swiper-pagination-bullet{background-color: #fff;opacity: .4;}
        .swiper-pagination-bullet-active{background-color: #ffc10c;opacity: 1;}

        .vip-name{color: #e60014;}
        .sex{color: #049cce;}
        .star{color: #fec015;}

        .f-info{line-height: 45px;padding: 0 12px;font-size: 14px;overflow: hidden;}
        .f-info .name{float: left;}
        .f-info .money{float: right;color: #3faa50;}
        .middle{display: -webkit-box;display: box;padding: 5px 0;border-top: 5px solid #eeedf3;border-bottom: 5px solid #eeedf3;}
        .middle a{-webkit-box-flex: 1;box-flex: 1;line-height: 35px;text-align: center;display: block;font-size: 14px;color: #333;}
        .middle .shop{border-left: 1px solid #eeedf3;color: red;}

        .list{}
        .list li{position: relative;line-height: 45px;overflow: hidden;padding: 0 12px;}
        .list li .left{float: left;width: 50px;color: #888;}
        .list li .center{float: left;color: #444;}
        .list li .right{float: right;color: #888;}

        .footer{height: 50px;}
        .footer-fixed{position: fixed;z-index: 999;left: 0;bottom: 0;width: 100%;height: 50px;
            display: -webkit-box;display: box;background-color: #fff;}
        .footer-fixed div i{font-size: 20px;}
        .footer-fixed div p{font-size: 12px;}
        .footer-fixed div span{font-size: 18px;}
        .footer-fixed .collect{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;color: #888;position: relative;}
        .footer-fixed .collect:after{content: '';position: absolute;left: auto;bottom: auto;right: 0;top: 0;height: 100%;width: 1px;background-color: #dcdcdc;
            display: block;z-index: 15;-webkit-transform-origin: 100% 50%;transform-origin: 100% 50%;transform: scale(.5,1);-webkit-transform: scale(.5,1);}
        .footer-fixed .contact{width: 50px;text-align: center;line-height: 20px;padding-top: 5px;}
        .footer-fixed .contact a{display: block;color: #888;}
        .footer-fixed .talk{background-color: #ffc10c;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
        .footer-fixed .reserve{background-color: #e70014;text-align: center;color: #fff;line-height: 50px;box-flex: 1;-webkit-box-flex: 1;}
    </style>
</head>
<body>
<script src="../js/overall_mask.js"></script>
    <header class="header header2">
        <div class="header-fixed">
            <div class="left">
                <a href="javascript:window.history.back();">
                    <i class="iconfont icon-arrowleft"></i>
                </a>
            </div>
            <div class="center">个人资料</div>
            <div class="right">
                <a href="">投诉</a>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" style="background-image: url('../img/p1945985913.jpg')"></div>
                <div class="swiper-slide" style="background-image: url('../img/p1945985913.jpg')"></div>
                <div class="swiper-slide" style="background-image: url('../img/p647007015.jpg')"></div>
            </div>
            <!-- 分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <div class="f-info">
            <div class="name">
                <span class="vip-name"><i class="iconfont icon-vip"></i><b>小明</b></span>
                <span class="sex"><i class="iconfont icon-women"></i></span>
                <span class="star"><i class="iconfont icon-star2"></i></span>
            </div>
            <div class="money">总收入：<span>2000</span>元</div>
        </div>
        <div class="middle">
            <a href="../html/user_rate.html" class="talk">用户评价（<span>20</span>）</a>
            <a href="../html/open_vip.html" class="shop">开通会员店铺</a>
        </div>
        <ul class="list">
            <li class="bottom-line">
                <p class="left">ID</p>
                <p class="center">201606145437</p>
            </li>
            <li class="bottom-line">
                <p class="left">地区</p>
                <p class="center">成都市高新区天府大道</p>
            </li>
            <li class="bottom-line">
                <p class="left">年龄</p>
                <p class="center">18</p>
                <p class="right">岁</p>
            </li>
            <li class="bottom-line">
                <p class="left">身高</p>
                <p class="center">185</p>
                <p class="right">cm</p>
            </li>
            <li class="bottom-line">
                <p class="left">体重</p>
                <p class="center">62</p>
                <p class="right">kg</p>
            </li>
            <li class="bottom-line">
                <p class="left">职业</p>
                <p class="center">代驾</p>
            </li>
            <li>
                <p class="left">签名</p>
                <p class="center">这个人很懒什么都没留下</p>
            </li>
        </ul>
    </div>
    <footer class="footer">
        <div class="footer-fixed top-line">
            <div class="collect">
                <i class="iconfont icon-star4"></i>
                <p>收藏</p>
            </div>
            <div class="contact">
                <a href="tel:123456">
                    <i class="iconfont icon-shouji"></i>
                    <p>联系</p>
                </a>
            </div>
            <div class="reserve">
                <i class="iconfont icon-yuyue"></i>
                <span>预约</span>
            </div>
        </div>
    </footer>
</body>
<script>
    var mySwiper = new Swiper ('.swiper-container', {
        loop: true,
        pagination: '.swiper-pagination'
    })
</script>
</html>